<template>
  <div class="color-palette">
    <div class="palette-title">配色方案</div>
    <div class="color-grid">
      <div
        v-for="theme in dayThemeSchemes"
        :key="theme.id"
        class="color-option"
        :class="{ active: currentDayScheme === theme.id }"
        :style="{ 'background-color': theme.color }"
        :data-name="theme.name"
        @click.stop="selectDayScheme(theme.id)"></div>
    </div>
  </div>
</template>

<script setup>
import { storeToRefs } from "pinia"
import { dayThemeSchemes } from "../utils/theme"
import appStore from "@/stores"

const { currentDayScheme } = storeToRefs(appStore.homeviewStore)

const emit = defineEmits(["click-it"])

const selectDayScheme = (schemeId) => {
  currentDayScheme.value = schemeId
  applyDayTheme()
  emit("click-it")
}

// 应用主题
const applyDayTheme = () => {
  const scheme = dayThemeSchemes.find((s) => s.id === currentDayScheme.value)
  if (!scheme) return

  // 应用CSS变量
  for (const [key, value] of Object.entries(scheme.vars)) {
    document.documentElement.style.setProperty(key, value)
  }
}
</script>

<style scoped>
.color-palette {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  border-radius: 18px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
  padding: 25px;
  z-index: 100;
  width: 280px;
  transform-origin: top right;
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.color-palette::before {
  content: "";
  position: absolute;
  bottom: 100%;
  right: 30px;
  border: 12px solid transparent;
  border-bottom-color: rgba(255, 255, 255, 0.95);
  filter: drop-shadow(0 -2px 2px rgba(0, 0, 0, 0.05));
}

.palette-title {
  text-align: center;
  font-size: 20px;
  color: #ffa726;
  margin-bottom: 20px;
  font-weight: 600;
  letter-spacing: 1px;
}

.color-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

.color-option {
  height: 50px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.color-option.active {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
  cursor: not-allowed;
}

.color-option.active::after {
  content: "✓";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 18px;
  font-weight: bold;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  z-index: 2;
}

.color-option::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.1);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.color-option:hover::after,
.color-option.active::after {
  opacity: 1;
}

.color-option:hover::before,
.color-option.active::before {
  content: attr(data-name);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 12px;
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  z-index: 2;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .color-palette {
    right: 50%;
    transform: translateX(50%);
  }

  .color-palette::before {
    right: 50%;
    transform: translateX(50%);
  }
}
</style>
